<template>
  <div class="business-box">
    <!--搜索框-->
    <div class="search-box">
      <div class="s-bg">
        <img v-if="searchInput==''" src="../../assets/images/search-ico.png" alt="">
        <input type="text" v-model="searchInput" v-on:change="search()" placeholder="请输入商品名或订单号"/>
      </div>
    </div>
    <!--tab标签-->
    <ul class="tab-box">
      <li :key="index" v-for="(item,index) in tabs" @click="isTab=index,selectByStatus(index)">
        <span :class="{on:isTab==index}">{{item}}</span>
        <span class="new-tips" v-if="num[index]>0">{{num[index]}}</span>
      </li>
    </ul>
    <div style="display: none">{{empty}}</div>
    <!--tab内容切换-->
    <div style="margin-top:5rem;">
      <div class="tab-content" v-for="items in orderData">
        <div class="fl-box">
          <div>订单编号:{{items.billNo}}</div>
          <div>
            {{items.isRec == 0 ? '待接单' : items.isRec == 1 ? items.orderStatus == 1 ? '待发货' : items.orderStatus == 2 ? '已发货' : '已完成' : ""
            }}
          </div>
        </div>
        <ul class="order-box">
          <li v-for="(item,index) in items.orderGoodsList" @click="goOrderDetail(items.billNo)">
            <div class="li-left">
              <!--<img :src="item.goods.goodsImg" alt="">-->
              <img :src="sourceUrl+item.goods.goodsImg" alt="">
            </div>
            <div class="li-right">
              <p class="li-title">{{item.goods.goodsName}}</p>
              <div class="li-describe">{{item.goods.goodsDesc}}</div>
              <div class="fl-box">
                <div class="fb-left">
                  ￥{{item.price}}
                </div>
                <div class="fb-right">
                  x{{item.orderNumber}}
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="award-money" v-if="items.tip!=null">
          <img src="../../assets/images/heart.png" alt="">侍酒师感谢金<span>{{items.tip}}</span>元
        </div>
        <div class="t-right">
          <span class="t-num">共{{items.orderGoodsList.length}}件商品</span>
          <span class="t-realy">实付{{items.paidMoney}}元</span>
        </div>
        <template v-if="items.isRec == 0">
          <div class="btn-box">
            <router-link to="">
              <span class="bc-ee" @click="rejectOrderPop(items.billNo)"
                    v-if="items.isRec==0&&items.orderGoodsList[0].goods.upgradePatch==0">拒绝接单</span>
            </router-link>
            <span @click="receiveOrder(items.billNo)">立即接单</span>
          </div>
        </template>
        <template v-else-if="items.isRec == 1&&items.orderStatus==1">
          <div class="btn-box">
            <span @click="deliverOrder(items.billNo)">立即发货</span>
          </div>
        </template>
        <template v-else-if="items.orderStatus == 3">
          <div class="btn-box">
            <span class="bc-ee" @click="deleteOrder(items.id)">删除订单</span>
            <span>查看详情</span>
          </div>
        </template>

      </div>
    </div>
    <TextPop v-if="receivePop" textPop="接单成功"></TextPop>
    <TextPop v-if="deliverPop" textPop="发货成功"></TextPop>
    <TextPop v-if="rejectPop" textPop="成功"></TextPop>
    <div class="pay-pop" v-if="confirmTip">
      <div style="width:100%;height:100%;" @click="confirmTip=false"></div>
      <div class="pay-bg" style="text-align: center">
        <p>确定要拒绝此订单吗?</p>
        <div class="reg-btn" @click="cancelReject()" style="float:left">取消</div>
        <div class="reg-btn" @click="rejectOrder()" style="float:left">确定</div>
      </div>
    </div>
  </div>
</template>

<script>

  import global from '../public/global.vue'

  export default {
    name: 'name',
    data() {
      return {
        searchInput: '',//搜索内容
        tabs: ['待接单', '待发货','已发货', '已完成'],//tabs标签
        isTab: 0,//选中的tab
        orderData: [],//订单数据列表
        sourceUrl: global.sourceUrl,
        receivePop: false,//接单成功提示弹窗
        deliverPop: false,//发货成功提示弹窗
        rejectPop: false,//已拒单提示弹窗
        confirmTip: false,
        billNo: '',//订单号
        num: [0, 0, 0,0],
        empty:'',
      }
    },
    methods: {
      //去订单详情
      goOrderDetail(arg) {
        this.$router.push({path: '/orderDetail', query: {billNo: arg, option: "fromBusiness"}})
      },
      unfinishedOrder(type) {
        let uid = global.getCookie("uid");
        let url = global.apiUrl;
        this.$http.get(url + "/business/myBusinessOrder", {
          params: {
            uid: uid,
            type: type
          }
        }).then(res => {
          if (res.data.code == 0) {
            console.log(res);
            this.orderData = res.data.data
            this.num[type] = res.data.data.length;
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      deleteOrder(id) {
        let self = this;
        let url = global.apiUrl;
        let data = "?id=" + id;
        self.$http.get(url + '/order/deleteOrderByUser' + data)
          .then(res => {
            console.log(res);
            if (res.data.code == 0) {
              this.rejectPop = true
              self.selectByStatus(this.isTab);
              setTimeout(() => {
                this.rejectPop = false
              }, 1200)
            }
          }).catch(function (err) {
          console.error(err);
        })
      },
      finishedOrder() {
        let uid = global.getCookie("uid");
        let url = global.apiUrl;
        this.$http.get(url + "/business/completeOrder", {
          params: {
            uid: uid,
          }
        }).then(res => {
          if (res.data.code == 0) {
            this.orderData = res.data.data
            this.num[3] = res.data.data.length;
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      selectByStatus(type) {
        if (type == 0 || type == 1|| type == 2) {
          this.unfinishedOrder(type)
        } else {
          this.finishedOrder();
        }
      },
      receiveOrder(billNo) {
        console.log(billNo)
        let url = global.apiUrl;
        let params = new URLSearchParams();
        params.append("billNo", billNo);
        this.$http({
          url: global.apiUrl + '/business/receiveOrder',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            console.log(res);
            this.unfinishedOrder(0);
            this.receivePop = true
            setTimeout(() => {
              this.receivePop = false
              this.isTab = 1
              this.unfinishedOrder(1);
            }, 1000)
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      rejectOrder() {
        let url = global.apiUrl;
        let params = new URLSearchParams();
        params.append("billNo", this.billNo);
        this.$http({
          url: global.apiUrl + '/business/rejectOrder',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            console.log(res);
            this.unfinishedOrder(0);
            this.rejectPop = true;
            this.confirmTip = false
            setTimeout(() => {
              this.rejectPop = false
            }, 1200)
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      deliverOrder(billNo) {
        console.log(billNo)
        let url = global.apiUrl;
        let params = new URLSearchParams();
        params.append("billNo", billNo);
        this.$http({
          url: global.apiUrl + '/business/deliverOrder',
          method: 'post',
          data: params,
        }).then(res => {
          if (res.data.code == 0) {
            console.log(res);
            this.unfinishedOrder(1);
            this.deliverPop = true
            setTimeout(() => {
              this.deliverPop = false
            }, 1500)
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      search() {
        let search = this.searchInput;
        console.log(search)
        let type = this.isTab;
        let uid = global.getCookie("uid");
        let url = global.apiUrl;
        let port = "";
        if (type == 0 || type == 1 || type == 2) {
          port = "/business/myBusinessOrder";
        } else {
          port = "/business/completeOrder";
        }
        this.$http.get(url + port, {
          params: {
            uid: uid,
            type: type,
            condition: search
          }
        }).then(res => {
          if (res.data.code == 0) {
            console.log(res);
            this.orderData = res.data.data
          }
        }).catch(function (err) {
          console.error(err)
        })
      },
      rejectOrderPop(billNo) {
        this.confirmTip = true
        this.billNo = billNo
      },
      cancelReject() {
        this.confirmTip = false
      }

    },
    mounted() {
      this.$nextTick(() => {
        let _this=this;
        let uid = global.getCookie("uid");
        let url = global.apiUrl;
        _this.$http.get(url + "/business/myBusinessOrder", {
          params: {
            uid: uid,
            type: 1
          }
        }).then(res => {
          if (res.data.code == 0) {
//            alert(res.data.data.length)
            _this.num[1] = res.data.data.length;
            _this.empty=1;
          }
        }).catch(function (err) {
          console.error(err)
        })


        _this.$http.get(url + "/business/myBusinessOrder", {
          params: {
            uid: uid,
            type: 2
          }
        }).then(res => {
          if (res.data.code == 0) {
//            alert(res.data.data.length)
            _this.num[2] = res.data.data.length;
            _this.empty=2;
          }
        }).catch(function (err) {
          console.error(err)
        })



        _this.$http.get(url + "/business/completeOrder", {
          params: {
            uid: uid,
          }
        }).then(res => {
          if (res.data.code == 0) {

            _this.num[3] = res.data.data.length;
            _this.empty=3;
          }
        }).catch(function (err) {
          console.error(err)
        })
      })
      document.title = "我的业务";
      this.unfinishedOrder(0);
//      this.num[1] = 2;
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .business-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #f3f3f3;
    .search-box {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 2.3rem;
      padding: 2% 0;
      background: #d44242;
      .s-bg {
        width: 80%;
        height: 1.5rem;
        line-height: 1.5rem;
        margin: 0 auto;
        background: #fff;
        border-radius: 4px;
        text-align: center;
        img {
          width: 16px;
          vertical-align: middle;
        }
        input {
          -webkit-appearance: none;
          width: 60%;
          height: 100%;
          font-size: 1rem;
          border: none;
          outline: none;
          vertical-align: top;
        }
      }
    }
    /*tab标签*/
    .tab-box {
      position: fixed;
      top: 2.3rem;
      left: 0;
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      padding: 0 2.5%;
      font-size: 1rem;
      display: flex;
      justify-content: space-between;
      background: #fff;
      color: #666;
      margin-bottom: 10px;
      li {
        position: relative;
        flex: 1;
        height: 100%;
        text-align: center;
        span {
          display: inline-block;
          height: 100%;
        }
        .new-tips {
          position: absolute;
          top: 2%;
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          background: #d44242;
          font-size: 0.65rem;
          color: #fff;
        }
        .on {
          font-weight: bold;
          color: #D43F3F;
          border-bottom: 2px solid #D43F3F;
        }
      }
    }
    /*tab内容*/
    .tab-content {
      width: 100%;
      padding: 0 2.5%;
      background: #fff;
      margin-bottom: 10px;
      .fl-box {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        color: #333;
        white-space: nowrap;
      }
      .order-box {
        width: 100%;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        li {
          width: 100%;
          padding: 3% 0;
          display: flex;
          .li-left {
            flex: 1;
            img {
              width: 100px;
              height: 100px;
              vertical-align: middle;
            }
          }
          .li-right {
            flex: 2;
            .li-title {
              font-size: 0.95rem;
              color: #333;
            }
            .li-describe {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin: 2% auto;
              font-size: 0.8rem;
              color: #666;
            }
            .fl-box {
              height: 1rem;
              line-height: 1rem;
              font-size: 0.9rem;
              .fb-left {
                color: #ff0000;
              }
              .fb-right {
                color: #666;
              }
            }
          }
        }
      }
      /*感谢金*/
      .award-money {
        width: 100%;
        padding: 2% 0;
        font-size: 0.85rem;
        img {
          width: 16px;
          vertical-align: middle;
        }
        span {
          color: #ff0000;
        }
      }
      .t-right {
        width: 100%;
        padding: 2% 0;
        text-align: right;
        .t-num {
          font-size: 0.8rem;
          color: #aaa;
        }
        .t-realy {
          font-size: 0.9rem;
          font-size: #333;
        }
      }
      .btn-box {
        width: 100%;
        height: 3rem;
        line-height: 3rem;
        text-align: right;
        span {
          padding: 2px 10px;
          border: 1px solid #D43F3F;
          border-radius: 4px;
          font-size: 1rem;
          color: #D43F3F;
        }
        .bc-ee {
          border-color: #aaa;
          color: #aaa;
        }
      }
    }
    /*提交弹窗*/
    .pay-pop {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
      .pay-bg {
        position: absolute;
        top: 30%;
        left: 0;
        right: 0;
        width: 90%;
        margin: auto;
        background: #fff;
        padding: 5% 10%;
        border-radius: 6px;
        .price {
          height: 3rem;
          line-height: 3rem;
          font-size: 1.5rem;
          text-align: center;
          margin-bottom: 10px;
        }
        label {
          display: block;
          height: 2rem;
          line-height: 2rem;
          text-align: center;
          border-bottom: 1px solid #eee;
          font-size: 1rem;
          font-weight: inherit;
          input {
            -webkit-appearance: radio;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin: 0;
          }
          span {
            margin-left: 10%;
            vertical-align: middle;
          }
        }
        .pay-btn {
          width: 100%;
          height: 2rem;
          line-height: 2rem;
          font-size: 1rem;
          color: #fff;
          background: #d44242;
          border-radius: 6px;
          text-align: center;
          margin-top: 20px;
        }
      }
    }
    .reg-btn {
      width: 60%;
      height: 2rem;
      line-height: 2rem;
      font-size: 1rem;
      color: #fff;
      background: #d44242;
      border-radius: 6px;
      text-align: center;
      margin-top: 20px;
      margin-left: 55px;
    }

  }
</style>
